<template>
  <Dialog :state="DialogData" @cancel="DialogData.visible = false" @confirm="onSubmit">
    <el-checkbox-group v-if="state.list.length" v-model="state.checkedList">
      <el-checkbox v-for="item in state.list" :key="item.Id" :label="item.Id">{{ item.Name }}</el-checkbox>
    </el-checkbox-group>
    <el-empty v-else />
  </Dialog>
</template>

<script lang="ts" setup>
  import Dialog from '@renderer/components/dialog'
  import { getGroupList } from '@renderer/ajax/api/common'
  import { reactive, ref, watch, defineExpose } from 'vue'
  import { ElMessage } from 'element-plus'
  const emit = defineEmits(['submit'])
  const DialogData = reactive({
    visible: false,
    title: '选择群聊',
    width: '700px',
    content: '',
    footer: ['取消', '确定']
  })
  const state = reactive({
    list: [],
    checkedList: []
  })
  const onSubmit = () => {
    if (state.checkedList.length) {
      let arr = state.list.filter((item: any) => state.checkedList.includes(item.Id))
      emit('submit', arr)
      DialogData.visible = false
    } else {
      DialogData.content = '请选择群聊'
    }
  }
  const getList = async () => {
    console.log(91490029140921094000000000)

    const res: any = await getGroupList()
    if(res && !res.length) {
      ElMessage.warning('未收到数据，可能未同步企微数据，请手动同步')
    }
    state.list = res
    console.log(state.list,22222);
  }
  watch(
    () => DialogData.visible,
    (v) => {
      if (v) {
        getList()
      }
    }
  )
  defineExpose({
    DialogData,
    state
  })
</script>
